﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AdUpDeWebForm.aspx.cs" Inherits="WebClient.AdUpDeWebForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Ứng dụng google map API</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDA4ADVHHljYbLQ8_Jz1UDtknpdQDFsH8E&amp;sensor=false"></script>
    <script src="scripts/googlemap.js" type="text/javascript"></script>
    <script src="scripts/filterEngineOK.js" type="text/javascript"></script>
    <script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript" src="scripts/AdUpDeWebForm.js"></script>
    <script type="text/javascript">
        //cac ham lien quan den viec khoi tao dau tien
        $(document).ready(function () {
            //load map
            initialize();
			getListPhuong();
			getListDuong();
            //add loadAll button click event
            $("#loadAll").click(function () {
                loadAllMarker();
            });
            $("#btLoadAll").click(function () {
                loadAllMarker();
            });
			
			/*$("mad").autocomplete({
				minLength: 2,
                source: function() {
					var Duongs ='[';
					alert($this).val();
                    $.ajax({
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                        url: "http://localhost:1445/NhaTroService.svc/Duong/AutoComplete/" + $(this).val(),
                        data: "{}",
                        dataType: "json",
                        success: function(data) {
						   
                           $.each(data, function (index) {
                				Duonsg += '"' + data[index].MaDuong + '-' + data[index].TenDuong + '",';
            			   }); 
						   Duongs += ']';
						   Duongs= data;
                        }
                   }); // ajax
				   
				   return Duongs;
		        }// source
			});*/
  	}); 
    </script>
    
</head>
<body>
	<div id="header">
		<div class='main-menu'>
			<ul>
			   <li class='active '><a href='index.html'><span>Home</span></a></li>
			   <li><a href='#'><span>Dữ liệu của bạn</span></a>
				  <ul>
					 <li><a href='#'><span>Thêm nhà trọ</span></a></li>
					 <li><a href='#'><span>Cập nhật nhà trọ</span></a></li>
				  </ul>
			   </li>
			</ul>
		</div>
	</div><!--#header-->
    <div id="top">
    	<div id="logo"></div>
        <div id="search">          
                <div style="padding-bottom:5px;padding-top:10px; margin:10px">
                  <input value="" title="Tìm kiếm" type="text" id="keyword" name="keyword" style="width:50%"/>
                  &nbsp; 
                  <input class="button" value="Tìm Kiếm" id="btsearch" type="button"/>
                  &nbsp; 
                  <input class="button" value="Hiển thị tất cả" id="btLoadAll" type="button"/>
         		</div>
    </div>
      	</div><!--#Search-->
    </div>
<!--#Top-->
	<div id="container">
		<div id="left-content" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
			<div class="barTitle"></div>
        <fieldset><legend>Chọn chức năng</legend>
        	<input type="radio" id="rInsert" name="option" checked="checked"  /> Thêm 
            <input type="radio" id="rDelete" name="option" /> Xóa
            <input type="radio" id="rUpdate" name="option" /> Sửa
        </fieldset>
    <div id="divInsert">
    	<div class="barTitle"><label id="lbl_action">Thêm nhà trọ</label></div>
       <table border="0px" width="99%">
       
            <tr>
                <td width="30%">Tên địa điểm</td>
                <td><input type="text" id="tendd" style="width:97%" /><input type="hidden" id="MaTenDiaDiem" value="0" /><input type="hidden" id="MaDuLieu" value="0" /><br />
                	<label style="display:none" id="lbl_MaTenDiaDiem"></label>
                </td>
            </tr> 
             <tr>
                <td height="30">Số nhà</td>
                <td><input type="text" id="sonha" style="width:97%" /> </td>
            </tr>
            <tr>
                <td>Đường</td>
                <td>
                 <!--<input type="text" id="mad" style="width:97%" value="799" /></td>-->
                 <span id="spanLoad2"><input type="checkbox" id="cbxLoadDuong" onclick="getListDuong();" /> Load đường</span>
                    <select style="display:inline-block;" id="mad">
                        
                    </select>
            </tr>
            <tr>
                <td>Phường</td>
                <td>
               		<span id="spanLoad"><input type="checkbox" id="cbxLoadPhuong" onclick="getListPhuong();" /> Load phường</span>
                    <select style="display:inline-block;" id="maph">
                        <!--<option value="92">Bến Nghé</option>-->
                    </select>
                    
                 </td>
            </tr>
            <tr>
                <td>Quận </td>
                <td>
                    <select id="maqh" style="width:100%">
                        <option value="26">1</option>
                        <option disabled="disabled" value="48">2</option>
                        <option value="46">3</option>
                        <option value="48">7</option>
                        <option value="28">4</option>
                        <option value="29">5</option>
                        <option value="30">6</option>
                        <option value="47">7</option>
                        <option value="31">8</option>
                        <option value="32">9</option>
                        <option value="33">10</option>
                        <option disabled="disabled" value="48">11</option>
                        <option disabled="disabled" value="48">12</option>
                        <option value="34">Tân Phú</option>
                        <option value="27">Tân Bình</option>
                        <option value="48">Bình Chánh</option>
                        <option value="45">Bình Thạnh</option>
                        <option value="44">Bình Tân</option>
                        <!--<option value="48">Củ chi</option>
                        <option value="48">Hoc Mon</option>
                        <option value="48">Cần giờ</option>-->
                    </select>
            	</td>
            </tr>
             <tr>
                <td>Tỉnh thành     </td>
                <td>
                    <select id="matinhthanh" style="width:100%">
                        <option value="16">Hồ Chí Minh</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td >Kinh độ </td>
                <td><input type="text" id="longitude" style="width:97%" /> </td>
            </tr>
            
            <tr>
                <td>Vĩ độ</td>
                <td><input type="text" id="latitude" style="width:97%" /> </td>
            </tr>
    
             <tr>
                <td>Chú Thích</td>
                <td><textarea cols="1" rows="3" id="chuthich" style="width:97%"></textarea></td>
            </tr>        
            <tr>
              <td colspan="2"><input class="button" type="button" id="btInsert" value="Thêm"/> &nbsp; 
              <input style="display:none" class="button" type="button" id="btUpdate" value="Cập nhật" onclick="updateNhaTro();"/>  &nbsp; 
              <input type="button" class="button" id="btInsertNhaTro" value="Hủy bỏ" /></td>
          </tr>
        </table>
        <script>
			function InsertNhaTro(){
				// MaDuLieu = 0 là tuong trưng để serial cho đúng calss, thực tế MaDuLieu bên Server xử lý
				/*jData.MaDuLieu = 0,
				jData.MaTenDiaDiem = $('#MaTenDiaDiem').val(),
				jData.MaDichVu = 20,
				jData.SoNha = $('#sonha').val(),
				jData.ChuThich = $('#chuthich').val(),
				jData.MaDuong = $('#mad').val().split("-")[0],
				jData.MaPhuong = $('#maph').val(),
				jData.MaQuanHuyen = $('#maqh').val(),
				jData.MaTinhThanh = $('#matinhthanh').val(),
				jData.KinhDo = $('#longitude').val(),
				jData.ViDo = $('#latitude').val()
				*/
				var objJSON = JSON.stringify('{"MaDuLieu":5115,"MaTenDiaDiem":"29502312","MaDichVu":20,"SoNha":"123","ChuThich":"aqsas","MaDuong":"799","MaPhuong":"92","MaQuanHuyen":"26","MaTinhThanh":"16","KinhDo":"106.44275665283203","ViDo":"10.765457061021339"}');
				alert(objJSON);
				$.ajax({
					url: "http://localhost:1445/NhaTroService.svc/Add",
					type: "POST",
					contentType: "application/json; charset=utf-8",
					data: objJSON,
					success: function (msg) {
						alert('success');
					},
					error: function (msg) {
						alert(msg);
					}
				}); // end ajax sub
			}
		</script>
	</div><!-- #divAdd -->
		</div><!--#left-content-->
		<div id="right-content">
            <div id="map">            </div>
		</div><!--#right-content-->
	</div>
<!--#containner-->
</body>
</html>

